<template>
  <details-layout
    :data="data"
    :related="related"
    channel="reports"
    titleField="名称"
    dateField="日期"
    contentField="描述">
    <div class="title text-center q-px-lg">{{data.名称}}</div>
    <div class="info row no-wrap relative-position justify-end">
      <div v-if="data.类型 === '行业应用案例'" class="type row absolute-center">
        <div class="q-px-md">{{$t('类型')}}: {{data.类型}}</div>
        <div class="q-px-md">{{$t('行业')}}: {{data.行业}}</div>
      </div>

      <div v-else class="type absolute-center">{{$t('类型')}}: {{data.类型}}</div>
      <div class="date">{{data.日期 | normalDate}}</div>
    </div>

    <pdfviewer
      class="q-mt-lg"
      version="clear"
      v-if="data && data.附件 && data.附件.id"
      :src="data.附件.id | serverDocument"
      v-model="showPreview"
      type="pdfjs"
      style="height: 1200px; max-width: 100%;"></pdfviewer>
    <div class="details" v-html="data.详情" v-else-if="data.详情"></div>

  </details-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import DetailsLayout from '../../components/detailsLayout.vue';
import { RefreshOnIDChange, RefreshRelatedOnIDChange } from '../../components/mixins/data';
import { GoHomeOnLocaleChange } from '../../components/mixins/locale';
import pdfviewer from '../../components/pdfviewer';

export default {
  name: 'OnlineTrainingDetails',
  mixins: [mixins.ObjectDataMixin, GoHomeOnLocaleChange,
    RefreshOnIDChange, RefreshRelatedOnIDChange],
  components: {
    DetailsLayout,
    pdfviewer,
  },
  data() {
    return {
      showPreview: true,
      related: [],
    };
  },
  created() {
    this.getRelated();
  },
  methods: {
    getRelated() {
      this.getRequest(`/portal/reports/related/${this.$route.params.id}`, { limit: 5 }).then((d) => {
        if (d && d.msg === 'OK') {
          this.related = d.data.docs;
        }
      });
    },
  },
};
</script>
